<template>
  <div>
    <a-table :columns="columns" :dataSource="dataSource" row-key="id">
      <template #name="{ text, record }">
        <draggable v-model="dataSource" :options="{ group: 'tableRows' }" @end="handleDragEnd">
          <tr>
            <td>{{ record.id }}</td>
            <td>{{ record.name }}</td>
            <td>{{ record.age }}</td>
          </tr>
        </draggable>
      </template>
    </a-table>

    <div class="dropzone" droppable @drop="handleDrop">
      <!-- 这里是空白区域的内容 -->
    </div>
  </div>
</template>

<script>
import { Table } from 'ant-design-vue';
import draggable from 'vuedraggable';

export default {
  components: {
    Table,
    draggable,
  },
  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: 'Name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
      ],
      dataSource: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Alice', age: 25 },
        { id: 3, name: 'Bob', age: 30 },
        { id: 4, name: 'Eve', age: 35 },
      ],
    };
  },
  methods: {
    handleDragEnd(event) {
      // 处理拖拉拽结束的逻辑，例如更新数据源的顺序
      this.dataSource = event;
    },
    handleDrop(event) {
      // 处理放置行数据到空白区域的逻辑
      const droppedData = event.dataTransfer.getData('text/plain');
      const rowData = JSON.parse(droppedData);
      // 在空白区域处理 rowData
      console.log(rowData);
    },
  },
};
</script>

<style scoped>
.dropzone {
  width: 300px;
  height: 200px;
  border: 1px dashed #ccc;
}
</style>
